<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>数据管理界面</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<style>
    /* Adjust sidebar style */
    .sidebar {
        height: 100%;
        width: 250px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #f8f9fa;
        padding-top: 50px; /* Padding to avoid overlapping with the fixed navbar */
    }

    /* Style links in the sidebar */
    .sidebar a {
        padding: 10px 15px;
        text-decoration: none;
        display: block;
        color: #333;
    }

    /* Change background color of active link */
    .sidebar a.active {
        background-color: #007bff;
        color: #fff;
    }

    /* Style for the content area */
    .content {
        margin-left: 250px; /* Adjust margin to avoid overlapping with the sidebar */
        padding: 20px;
    }
</style>
<!-- Sidebar -->
<div class="sidebar">
    <a href="{% url 'user_backend' %}" >用户管理界面</a>
    <a href="{% url 'data_manage' %}" class="active">数据管理界面</a>
    <a href="#" data-toggle="modal" data-target="#predictModal">租聘人数预测</a>
</div>

<!-- Page content -->
<div class="content">
    <h2>数据信息</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            {% for columns_name in columns_names %}
                <th>{{ columns_name }}</th>
            {% endfor %}
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for datum in data_info %}
            <tr>
                <td>{{ datum.0 }}</td>
                <td>{{ datum.1 }}</td>
                <td>{{ datum.2 }}</td>
                <td>{{ datum.3 }}</td>
                <td>{{ datum.4 }}</td>
                <td>{{ datum.5 }}</td>
                <td>{{ datum.6 }}</td>
                <td>{{ datum.7 }}</td>
                <td>{{ datum.8 }}</td>
                <td>{{ datum.9 }}</td>
                <td>{{ datum.10 }}</td>
                <td>{{ datum.11 }}</td>
                <td>{{ datum.12 }}</td>
                <td>{{ datum.13 }}</td>
                <td>{{ datum.14 }}</td>
                <td>{{ datum.15 }}</td>
                <td>
                    <button class="btn-sm btn btn-info" data-toggle="modal" data-target="#editModal"
                            data-info="{{ datum }}">修改
                    </button>
                    <button class="btn-sm btn btn-info" onclick="delete_Data(this)">删除</button>

                </td>
            </tr>
        {% endfor %}

        <!-- 添加更多用户行 -->
        </tbody>
    </table>
</div>


<!--租聘人数界面预测模态框-->
<!-- Modal -->
<div class="modal fade" id="predictModal" tabindex="-1" role="dialog" aria-labelledby="predictModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="predictModalLabel">租聘人数预测界面</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>请输入指标后点击提交，后台会将预测结果弹出在提示框中。:</p>
                <form id="prediction-form">
                    <input type="text" class="form-control" name="hour" placeholder="Hour">
                    <input type="text" class="form-control" name="temperature" placeholder="Temperature">
                    <input type="text" class="form-control" name="humidity" placeholder="Humidity">
                    <input type="text" class="form-control" name="windspeed" placeholder="WindSpeed">
                    <input type="text" class="form-control" name="visibility" placeholder="Visibility">
                    <input type="text" class="form-control" name="dewpoint" placeholder="DewPointTemperature">
                    <input type="text" class="form-control" name="solar" placeholder="SolarRadiation">
                    <input type="text" class="form-control" name="rainfall" placeholder="Rainfall">
                    <input type="text" class="form-control" name="snowfall" placeholder="Snowfall">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit-btn">提交</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">请修改基于对应租聘人数的数据，并点击提交</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="edit-form">
                    <div class="form-group">
                        <label for="date">Date</label>
                        <input type="text" class="form-control" id="date" name="date">
                        <label for="RentedBikeCount">RentedBikeCount</label>
                        <input type="text" class="form-control" id="RentedBikeCount" name="RentedBikeCount">
                        <label for="Hour">Hour</label>
                        <input type="text" class="form-control" id="Hour" name="Hour">
                        <label for="Temperature">Temperature</label>
                        <input type="text" class="form-control" id="Temperature" name="Temperature">
                        <label for="Humidity">Humidity</label>
                        <input type="text" class="form-control" id="Humidity" name="Humidity">
                        <label for="WindSpeed">WindSpeed</label>
                        <input type="text" class="form-control" id="WindSpeed" name="WindSpeed">
                        <label for="Visibility">Visibility</label>
                        <input type="text" class="form-control" id="Visibility" name="Visibility">
                        <label for="DewPointTemperature">DewPointTemperature</label>
                        <input type="text" class="form-control" id="DewPointTemperature" name="DewPointTemperature">
                        <label for="SolarRadiation">SolarRadiation</label>
                        <input type="text" class="form-control" id="SolarRadiation" name="SolarRadiation">
                        <label for="Rainfall">Rainfall</label>
                        <input type="text" class="form-control" id="Rainfall" name="Rainfall">
                        <label for="Snowfall">Snowfall</label>
                        <input type="text" class="form-control" id="Snowfall" name="Snowfall">
                        <label for="Seasons">Seasons</label>
                        <input type="text" class="form-control" id="Seasons" name="Seasons">
                        <label for="Holiday">Holiday</label>
                        <input type="text" class="form-control" id="Holiday" name="Holiday">
                        <label for="FunctioningDay">FunctioningDay</label>
                        <input type="text" class="form-control" id="FunctioningDay" name="FunctioningDay">


                    </div>
                    <!-- 添加其他字段的输入框 -->
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="editSubmit" onclick="submit_modify()">提交修改
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
<script>
    // 预测按钮
    document.getElementById("submit-btn").addEventListener("click", function () {
        // 创建 FormData 对象
        var formData = new FormData(document.getElementById("prediction-form"));

        // 发送请求到后台
        axios.post("{% url 'predict' %}", formData)
            .then(function (response) {
                // 处理后台返回的响应
                console.log(response.data);
                alert(`预测成功！基于您输出的指标，租聘人数预测为：${response.data.data}`)
            })
            .catch(function (error) {
                // 处理请求错误
                console.log(error);
            });
    });

    //修改窗
    document.querySelectorAll('button[data-target="#editModal"]').forEach(function (button) {
        button.addEventListener('click', function () {
            // 找到触发按钮所在的行
            let row = button.closest('tr');

            // 获取行中第二个单元格的数据
            let firstData = row.cells[1].innerText;

            // 在这里执行您需要的操作，比如将数据填充到模态框中
            let RentedBikeCount_input = document.getElementById("RentedBikeCount")
            RentedBikeCount_input.value = firstData
            RentedBikeCount_input.disabled = true

        });


    });

    //修改数据数据
    function submit_modify() {
        // 获取模态框中的表单元素
        var form = document.getElementById('edit-form');

        // 创建FormData对象
        var formData = new FormData(form);

        // 发送axios请求
        axios.post('{% url 'modify_bike' %}', {
            formData
        })
            .then(response => {
                console.log(response.data); // 处理后端返回的数据
                // 如果登录成功，跳转到功能界面
                if (response.data.code === 1) {
                    alert(response.data.data)

                }
                // 如果登陆失败，跳出提示框。
            })
            .catch(error => {
                console.error(error); // 处理请求错误
            });
    }

    // 删除数据
    function delete_Data(button) {
        // 找到触发按钮所在的行
        let row = button.closest('tr');

        // 获取行中第二个单元格的数据-->租聘自行车数
        let firstData = row.cells[1].innerText;
        console.log(firstData)

        // 发送axios请求
        axios.post('{% url 'del_bike' %}', {
            RentedBikeCount: firstData
        })
            .then(response => {
                console.log(response.data); // 处理后端返回的数据
                // 如果登录成功，跳转到功能界面
                if (response.data.code === 1) {
                    alert(response.data.data)

                }
                // 如果登陆失败，跳出提示框。
            })
            .catch(error => {
                console.error(error); // 处理请求错误
            });
    }
</script>
<script src="{% static 'web/login_register_static/axios.js' %}"></script>
</html>